
.rotate1{
    animation: rotateClockwise 1.6s linear infinite;
}
.rotate2{
    animation: rotateCounterclockwise 3s linear infinite;
}
.rotate5{
    animation: rotateClockwise 12s linear infinite;
}
.rotate6{
    animation: rotateCounterclockwise 4.5s linear infinite;
}
.rotate7{
    animation: rotateClockwise 3.6s linear infinite;
}
.rotate10{
    animation: rotateClockwise 5.5s linear infinite;
}
.rotate11{
    animation: rotateCounterclockwise 5.5s linear infinite;
}
/*.rotate12{*/
    /*animation: rotateClockwise 45s linear infinite;*/
/*}*/
.rotate13{
    animation: rotateCounterclockwise 24s linear infinite;
}
/*顺时针*/
@keyframes rotateClockwise {
    0% {
        transform: rotate(0deg) translateZ(0);
    }
    100% {
        transform: rotate(360deg) translateZ(0);
    }
}
/*逆时针*/
@keyframes rotateCounterclockwise {
    0% {
        transform: rotate(0deg) translateZ(0);
    }
    100% {
        transform: rotate(-360deg) translateZ(0);
    }
}

.lunar{
    width:142px;
    height:142px;
    position: absolute;
    top:249px;
    margin-left: -71px;
    left:50%;
    background: url('../img/moon.png');
    background-size:11000% 100%;
    animation:sprit 2.4s steps(109) 1s;
    animation-fill-mode:forwards;
}
.lunar2{
    width:142px;
    height:142px;
    position: absolute;
    top:249px;
    margin-left: -71px;
    left:50%;
    background:url('../img/moon_g.png') no-repeat;
    background-size: 100% 100%;
}
@keyframes sprit {
    to {
        background-position-x: 100%
    }
}
.svg-level-3{
    animation: svgLevel3 2s linear;
}
@keyframes svgLevel3 {
    0% {
        transform: scale(0) translateZ(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(1) translateZ(0);
        opacity: 0.6;
    }
}
.svg-level-8{
    animation: svgLevel8 2s linear;
}
@keyframes svgLevel8 {
    0% {
        transform: scale(0) translateZ(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(1) translateZ(0);
        opacity: 0.6;
    }
}
.svg-level-12{
    animation: labelsShow 2.8s linear;
}
@keyframes labelsArrow {
    0% {
        transform: scale(0) translateZ(0);
    }
    25%{
        transform: scale(0) translateZ(0);
    }
    100% {
        transform: scale(1) translateZ(0);
    }
}
.labels{
    animation: labelsShow 3s linear;
}
@keyframes labelsShow {
    0% {
        transform: scale(0) translateZ(0);
    }
    30%{
        transform: scale(0) translateZ(0);
    }
    100% {
        transform: scale(1) translateZ(0);
    }
}

/*流星样式*/
.stars{
    position: absolute;
    background: url("../img/star.png") no-repeat;
    background-size: 100% 100%;
    opacity: 0;
}
.star1{
    width:90px;
    height: 90px;
    top:20%;
    left:0px;
    animation: star1 5s ease-in infinite 5s;
}
@keyframes star1 {
    10%{
        opacity: 1;
    }
    100% {
        top:100%;
        left:70%;
    }
}
.star2{
    width:85px;
    height: 85px;
    top:0;
    left:40%;
    animation: star2 5s ease-in 4s infinite;
}
@keyframes star2 {
    10%{
        opacity: 1;
    }
    100% {
        top:60%;
        left:100%;
    }
}
.star3{
    width: 50px;
    height: 50px;
    top:0;
    left:20%;
    animation: star3 5s ease-in 3s infinite;
}
@keyframes star3 {
    20%{
        opacity: 1;
    }
    100% {
        top:80%;
        left:90%;
    }
}
.star4{
    width: 70px;
    height: 70px;
    top:10%;
    left:20%;
    animation: star4 5s ease-in 3s infinite;
}
@keyframes star4 {
    20%{
        opacity: 1;
    }
    100% {
        top:70%;
        left:80%;
    }
}
.star5{
    width: 60px;
    height: 60px;
    top:30%;
    left:0;
    animation: star5 5s ease-in 5s infinite;
}
@keyframes star5 {
    20%{
        opacity: 1;
    }
    100% {
        top:100%;
        left:80%;
    }
}
.star6{
    width: 40px;
    height: 40px;
    top:60%;
    left:0;
    animation: star6 3s ease-in 4s infinite;
}
@keyframes star6 {
    20%{
        opacity: 1;
    }
    100% {
        top:100%;
        left:60%;
    }
}

/*for safari*/
.scale-s-level1{
    transform: scale(0);
    animation: scale-s-level1 1.5s linear;
    animation-fill-mode: forwards;
}
@keyframes scale-s-level1 {
    to{
        transform: scale(1) translateZ(0);
    }
}
.scale-s-level2{
    transform: scale(0) translateZ(0);
    animation: scale-s-level2 2s linear;
    animation-fill-mode: forwards;
}
@keyframes scale-s-level2 {
    to{
        transform: scale(1) translateZ(0);
    }
}
.scale-s-level3{
    transform: scale(0) translateZ(0);
    animation: scale-s-level3 2.5s linear;
    animation-fill-mode: forwards;
}
@keyframes scale-s-level3 {
    to{
        transform: scale(1) translateZ(0);
    }
}